import React, { Component } from 'react';
import { WingBlank, Popup, Toast } from 'antd-mobile';
import './UserCash.less';

import SeperateLine from 'common/components/SeperateLine.js';
import Header from 'common/components/Header.js';

import * as common from 'common/common.js';
import * as userApi from 'common/api/UserApi.js';

class UserCash extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
			  rechargeType: 0,
			  rechargeMoney: null,
			  userInfo: {}
	    };
	}
	  
	componentDidMount() {
		Toast.loading("", common.TIPS_LOADING_DURATION);
		userApi.userInfo({
			memberId:common.userId()
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				this.setState({
					userInfo: result.data
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	//前往支付
	gotoPay = () => {
		Popup.hide();
		Toast.loading("前往充值", common.TIPS_LOADING_DURATION);
		userApi.balanceRecharge({
			memberId:common.userId(),
			rechargeType: this.state.rechargeType,
			rechargeMoney: this.state.rechargeMoney
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				Toast.loading("充值中...", common.TIPS_LOADING_DURATION);
				setTimeout(function(){
					common.goBack();
				}, 2000);
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}

  	//选择支付方式
	selectrechargeType = (index) => {
		this.setState({
			rechargeType: index
		})
	}

  	showRecharge = (e, val) => {
  		// 修复 Android 上点击穿透
		e.preventDefault(); 
		this.setState({
			rechargeMoney: val*100
		})
	   	Popup.show(
	   		<div className="userCashRecharge">
				<div className="userCashRechargeTitle">
					<img src="assets/img/close.png" onClick={()=>Popup.hide()}/>
					{/* <span>充值</span>  */}
				</div>
				<h1>{val}<em>元</em></h1>
				{
					this.state.rechargeType == 0
					?
					<ul>
						<li className="active">
							<img src="assets/img/pay_zfb.png"/>
							<span>支付宝</span>
						</li>
						<li onClick={() => this.selectrechargeType(1)}>
							<img src="assets/img/pay_weixin.png"/>
							<span>微信</span>
						</li>
					</ul>
					:
					<ul>
						<li onClick={() => this.selectrechargeType(0)}>
							<img src="assets/img/pay_zfb.png"/>
							<span>支付宝</span>
						</li>
						<li className="active">
							<img src="assets/img/pay_weixin.png"/>
							<span>微信</span>
						</li>
					</ul>
				}
				<div className="userCashRechargeNow" onClick={()=>this.gotoPay()}>
					立即支付
				</div>
			</div>, 
   		{animationType: 'slide-up'});
 	}

	onClose = key => () => {
	    this.setState({
	      [key]: false,
	    });
  	}

	render(){
		const { userInfo } = this.state;
		return(
			<div className="container userCash">
				<Header title={"我的账户"}></Header>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				<WingBlank>
					<h1>{common.fenToYuan(userInfo.balance)}<em>元</em></h1>
					<h4>余额充值</h4>
					<ul className="cashRecharge">
						<li onClick={e => this.showRecharge(e, 1)}>
							<div className="rechargeNum">
								<span>1<em>元</em></span>
							</div>
						</li>
						<li className="ml1" onClick={e => this.showRecharge(e, 5)}>
							<div className="rechargeNum">
								<span>5<em>元</em></span>
							</div>
						</li>
						<li onClick={e => this.showRecharge(e, 20)}>
							<div className="rechargeNum">
								<span>20<em>元</em></span>
							</div>
						</li>
						<li className="ml1" onClick={e => this.showRecharge(e, 50)}>
							<div className="rechargeNum">
								<span>50<em>元</em></span>
							</div>
						</li>
						<li onClick={e => this.showRecharge(e, 100)}>
							<div className="rechargeNum">
								<span>100<em>元</em></span>
							</div>
						</li>
						<li className="ml1" onClick={e => this.showRecharge(e, 500)}>
							<div className="rechargeNum">
								<span>500<em>元</em></span>
							</div>
						</li>
					</ul>
				</WingBlank>
			</div>
		)
	}
}

export default UserCash;